<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>Cel Shading</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/Cel_Shading"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Cel_Shading rootpage-Cel_Shading skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Cel Shading</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p><b>Cel Shading</b> oder <b>Cel-shaded Animation</b> (gelegentlich <b>Toon-Shading</b>) ist eine Technik zum <a href="Nicht-fotorealistisches_Rendern" class="mw-redirect" title="Nicht-fotorealistisches Rendern">nicht-fotorealistischen Rendern</a> von 3D-<a href="Computergrafik" title="Computergrafik">Computergrafiken</a>. Dabei erhalten Bilder oder Animationen, die auf einem digitalen 3D-Modell basieren, ein Aussehen, als wären sie von Hand im <a href="Cel" title="Cel">Stil eines Comics oder Zeichentrickfilms</a> erstellt. Die Technik wird seit etwa 1997 bei der Produktion von Zeichentrickfilmen und seit etwa 2000 in <a href="Computerspiel" title="Computerspiel">Computerspielen</a> angewendet. Der englische Begriff <i>cel</i> (von <i>celluloid</i>, deutsch <a href="Zelluloid" title="Zelluloid">Zelluloid</a><sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>) bezieht sich auf das Aussehen der sogenannten <a href="Cel" title="Cel">Cels</a> im Produktionsprozess von Trickfilmen, während <i>toon</i> vom englischsprachigen <i><a href="Cartoon" title="Cartoon">Cartoon</a></i> abgeleitet ist.
</p><p>Obwohl das Resultat von Cel Shading recht einfach wirkt, ist der Prozess der Entwicklung komplex.
</p>
<div class="mw-heading mw-heading2"><h2 id="Prozess">Prozess</h2></div>
<p>Der Prozess des Cel Shading beginnt mit einem typischen 3D-Modell. Der Unterschied zu traditionellen Render-Methoden besteht in der Art, wie diese Modelle auf dem Bildschirm dargestellt werden. Statt die Schattierungen auf dem Objekt weich verlaufen zu lassen, werden nur drei oder vier Helligkeitsstufen verwendet (in der Regel weiß, hellgrau und dunkelgrau, aber kein schwarz) und bei Oberflächen wird fast immer auf Texturen verzichtet und es werden stattdessen nur einzelne Farbtöne verwendet. Zur effizienten Implementierung werden die Graustufen in einer 1D-Textur gespeichert und dann wird der benötigte Grauwert über den Winkel zwischen dem Normalenvektor des Polygons und dem Vektor vom Polygon zur Lichtquelle berechnet. Der Kosinus dieses Winkels ist dann der gewünschte Punkt auf der Textur (1=Hell, 0=dunkel, bei Werten <0 wird die Textur von hinten beleuchtet und der Wert wird auf 0 gesetzt). Der Kosinus des Winkels lässt sich direkt über das <a href="Skalarprodukt" title="Skalarprodukt">Skalarprodukt</a> der beiden Vektoren berechnen. Bei moderneren Grafikkarten können diese Berechnungen auch direkt in den <a href="Shader" title="Shader">Shadern</a> durchgeführt werden.
</p><p>Um schwarze Linien darzustellen, die Konturen eines Objekts zu zeichnen, invertiert man <a href="Backface_Culling" class="mw-redirect" title="Backface Culling">Backface Culling</a>, um Dreiecke, die eigentlich perspektivisch nach hinten sichtbar sind, schwarz darzustellen. Diese Linien müssen mehrmals mit leichten Variationen in der Invertierung gezeichnet werden, um dicke Striche zu erzeugen. Das Back Face Culling wird dann in den Normalzustand versetzt, um die Farbtöne und zusätzliche Texturen für das Objekt darzustellen. Abschließend wird das Gesamtbild über einen <a href="Z-Buffer" title="Z-Buffer">Z-Buffer</a> zusammengesetzt. Das Resultat ist ein Objekt, das mit einer schwarzen Umrandung und sogar Konturen innerhalb der Objektoberfläche dargestellt wird.
</p>
<div class="mw-heading mw-heading2"><h2 id="Verwendung_in_Filmen">Verwendung in Filmen</h2></div>
<p>Filme und Animationen mit Cel Shading ermöglichen im Vergleich zu handgezeichneten Cartoons wesentlich aufwändigere Effekte wie Kameraschwenks oder eine Vielzahl bewegter Objekte, da diese (relativ günstig) gestaltet und berechnet und nicht (aufwändig) per Hand gezeichnet werden müssen. Auffällig ist dies etwa bei bewegten Hintergründen, wie z. B. beim Start des Raumschiffs in <i><a href="Futurama" title="Futurama">Futurama</a></i>. Hier wirkt die Bewegung des Hintergrunds deutlich realistischer als beispielsweise bei den <i><a href="Die_Simpsons" title="Die Simpsons">Simpsons</a></i>, wo die Kamerafahrten in der Regel nur aus einem von rechts nach links bewegten Hintergrund bestehen und ein Objekt auf dem Vordergrund an der mehr oder minder gleichen Stelle bleibt. Dennoch wirkt Cel Shading oft etwas steril, weswegen Serien wie die <i>Simpsons</i> immer noch per Hand gezeichnet werden.
</p><p>Prinzipiell kommt bei allen Zeichentrick-Produktionen, die 3D-Modelle verwenden und die Ästhetik eines klassischen Zeichentrickfilms haben, Cel Shading zum Einsatz. Eine Auswahl:
</p>
<ul><li><i><a href="Animatrix" title="Animatrix">Animatrix</a></i> (Kurzfilme 2003)</li>
<li><i><a href="Appleseed_(Film)" title="Appleseed (Film)">Appleseed</a></i> (<a href="Anime" title="Anime">Anime</a> 2004)</li>
<li><i><a href="BanG_Dream!_(Anime)" title="BanG Dream! (Anime)">BanG Dream!</a></i> (Anime 2017, ab Staffel 2)</li>
<li><i><a href="D4DJ_(Anime)" title="D4DJ (Anime)">D4DJ</a></i> (Anime 2020)</li>
<li><i><a href="Das_Land_der_Juwelen" title="Das Land der Juwelen">Das Land der Juwelen</a></i> (Anime 2017)</li>
<li><i><a href="Futurama" title="Futurama">Futurama</a></i> (Serie 1999–2013)</li>
<li><i><a href="Der_Gigant_aus_dem_All" title="Der Gigant aus dem All">Der Gigant aus dem All</a></i> (Film 1999)</li>
<li><i><a href="Die_Simpsons_%E2%80%93_Der_Film" title="Die Simpsons – Der Film">Die Simpsons – Der Film</a></i> (Film 2007, auch einige Episoden der Serie)</li>
<li><i><a href="Spirit_%E2%80%93_Der_wilde_Mustang" title="Spirit – Der wilde Mustang">Spirit – Der wilde Mustang</a></i> (Film 2002, handgezeichnete Charaktere, Landschaften via Cel Shading)</li></ul>
<p>Die Filme <i><a href="Waking_Life" title="Waking Life">Waking Life</a></i> und <i><a href="A_Scanner_Darkly_%E2%80%93_Der_dunkle_Schirm" title="A Scanner Darkly – Der dunkle Schirm">A Scanner Darkly – Der dunkle Schirm</a></i> wurden zunächst auf Film gedreht und anschließend mit dem Programm Rotoshop von Bob Sabiston digitalisiert und durch <a href="Rotoskopie" title="Rotoskopie">Rotoskopie</a> verfremdet. Dadurch wirken diese Filme, als ob sie mit Cel Shading generiert worden wären.
</p>
<div class="mw-heading mw-heading2"><h2 id="Verwendung_in_Computerspielen">Verwendung in Computerspielen</h2></div>
<p>Bei Computerspielen ist es eine künstlerische Frage, ob Cel Shading in der Grafik-Engine eingesetzt wird. Als die Technik neu war, gab es eine ganze Welle von Spielen (Modeerscheinung). Inzwischen findet Cel-Shading nur gezielt Verwendung. Für <i><a href="%C5%8Ckami" title="Ōkami">Ōkami</a></i> von Clover Studios gibt es frühe Demo-Videos, die Spielszenen in der Ästhetik japanischer Malerei zeigen. Dies war für die PS2 zu rechenaufwändig. Im schließlich veröffentlichten Spiel ist die Cel-Shading-Grafik wesentlich konventioneller.
</p><p>Einige bekannte Computerspiele, die Cel Shading einsetzen:
</p>
<ul><li><i><a href="Afro_Samurai" title="Afro Samurai">Afro Samurai</a></i> (2009)</li>
<li><i><a href="Breath_of_Fire#Breath_of_Fire:_Dragon_Quarter" title="Breath of Fire">Breath of Fire: Dragon Quarter</a></i> (2002)</li>
<li><i><a href="Dark_Chronicle" title="Dark Chronicle">Dark Chronicle</a></i> (2002)</li>
<li><i><a href="Dragon_Quest_VIII" title="Dragon Quest VIII">Dragon Quest VIII: Die Reise des verwunschenen Königs</a></i> (2004)</li>
<li><i><a href="Eternal_Sonata" title="Eternal Sonata">Eternal Sonata</a></i> (2007)</li>
<li><i><a href="Fear_Effect" title="Fear Effect">Fear Effect</a></i> (2000)</li>
<li><i><a href="Genshin_Impact" title="Genshin Impact">Genshin Impact</a></i> (2020)</li>
<li><a href="Jet_Set_Radio" title="Jet Set Radio"><i>Jet-Set-Radio</i>-Serie</a> (2000)</li>
<li><i><a href="Killer_Is_Dead" title="Killer Is Dead">Killer Is Dead</a></i> (2013)</li>
<li><i><a href="Killer7" title="Killer7">killer7</a></i> (2005)</li>
<li><i><a href="League_of_Legends" title="League of Legends">League of Legends</a></i> (2009)</li>
<li><i><a href="No_More_Heroes" title="No More Heroes">No More Heroes</a></i> (2008)</li>
<li><i><a href="%C5%8Ckami" title="Ōkami">Ōkami</a></i> (2006)</li>
<li><i><a href="Prince_of_Persia#Prince_of_Persia_(2008)" title="Prince of Persia">Prince of Persia</a></i> (2008)</li>
<li><a href="Sly_Raccoon" class="mw-redirect" title="Sly Raccoon"><i>Sly-Racoon</i>-Serie</a> (2003)</li>
<li><i><a href="Sonic_the_Hedgehog" title="Sonic the Hedgehog">Sonic Shuffle</a></i> (2000)</li>
<li><i><a href="Tales_of_Symphonia" title="Tales of Symphonia">Tales of Symphonia</a></i> (2003)</li>
<li><i><a href="The_Legend_of_Zelda%3A_Breath_of_the_Wild" title="The Legend of Zelda: Breath of the Wild">The Legend of Zelda: Breath of the Wild</a></i> (2017)</li>
<li><i><a href="The_Legend_of_Zelda%3A_Tears_of_the_Kingdom" title="The Legend of Zelda: Tears of the Kingdom">The Legend of Zelda: Tears of the Kingdom</a></i> (2023)</li>
<li><i><a href="The_Legend_of_Zelda%3A_The_Wind_Waker" title="The Legend of Zelda: The Wind Waker">The Legend of Zelda: The Wind Waker</a></i> (2003)</li>
<li><i><a href="The_Legend_of_Zelda%3A_The_Wind_Waker_HD" title="The Legend of Zelda: The Wind Waker HD">The Legend of Zelda: The Wind Waker HD</a></i> (2013)</li>
<li><i><a href="The_Walking_Dead_(Computerspiel)" title="The Walking Dead (Computerspiel)">The Walking Dead</a></i> (2012)</li>
<li><i>Untitled Goose Game</i> (2019)</li>
<li><i><a href="Valkyria_Chronicles" title="Valkyria Chronicles">Valkyria Chronicles</a></i> (2008)</li>
<li><i><a href="Valorant" title="Valorant">Valorant</a></i> (2020)</li>
<li><a href="Viewtiful_Joe" title="Viewtiful Joe"><i>Viewtiful-Joe</i>-Serie</a> (2003)</li>
<li><i><a href="Warsow_(Computerspiel)" title="Warsow (Computerspiel)">Warsow</a></i> (2005)</li>
<li><i><a href="X_Rebirth" class="mw-redirect" title="X Rebirth">X Rebirth</a></i> (2013)</li>
<li><i><a href="XIII_(Computerspiel%2C_2003)" title="XIII (Computerspiel, 2003)">XIII</a></i> (2003)</li></ul>
<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>
<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noresize noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"><span class="mw-default-size" typeof="mw:File"><span title="Commons"></span></span></div><b><span class=""><a class="external text" href="https://commons.wikimedia.org/wiki/Category:Cel_shading?uselang=de"><span lang="en">Commons</span>: Cel shading</a></span></b> – Sammlung von Bildern, Videos und Audiodateien</div>
<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>
<ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text">Vgl. <style data-mw-deduplicate="TemplateStyles:r261891140">
/* start https://de.wikipedia.org/ */
.mw-parser-output .webarchiv-memento a{color:inherit}
/* end https://de.wikipedia.org/ */
</style><a rel="nofollow" class="external text" href="https://web.archive.org/web/20220223055516/http://www.celshader.com/FAQ.html">Cellshader.com FAQ</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> vom 23. Februar 2022 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>), Jennifer Hachigian 2005.</span>
</li>
</ol></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-02-21" href="https://de.wikipedia.org/wiki/?title=Cel_Shading&oldid=253528254">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>
</body></html>